<!--
 * @Description: Description
 * @Author: laoyuan
 * @Date: 2023-06-09 16:52:53
-->
<template>
  <div class="home-box">
    <h1 class="title">首页-使用vant</h1>
    <van-button class="btn" type="primary" @click="handleNav()">跳转到个人中心</van-button>
    <div class="count" @click="count++">
      count is <span class="text">{{ count }}</span>
    </div>
    <van-button type="primary" class="btn" v-throttle="onSubmit">测试指令和toast组件</van-button>
    <van-button type="primary" class="btn" @click="onShowComponent">测试自定义弹窗组件</van-button>
    <NewTodo></NewTodo>
  </div>
</template>
<script setup lang="ts">
  import { ComponentInternalInstance } from 'vue';
  import Dialog from '@/components/Dialog';
  import NewTodo from '../todo.vue';

  const router = useRouter();
  function handleNav() {
    router.push({
      path: '/center',
      query: { id: '100' },
    });
  }
  const count = ref(100);

  // 响应式数据声明样式
  const color = ref('blue');
  const style = reactive({
    opacity: '0.8',
  });

  // toast插件测试
  const { globalProperties } = (getCurrentInstance() as ComponentInternalInstance).appContext
    .config;
  function onSubmit() {
    globalProperties.$toast('提示内容');
  }

  // 弹窗提示框测试
  function onShowComponent() {
    const content = '确定要提交吗？';
    Dialog(content)
      .then(() => {
        // 点击确定按钮;
      })
      .catch(() => {
        // 点击取消按钮;
      });
  }
</script>
<style lang="scss" scoped>
  .home-box {
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      font-size: 18px;
      color: v-bind(color);
      border-bottom: 2px solid #ddd;
      opacity: v-bind(style);
    }
    .btn {
      display: block;
      margin: 15px auto;
    }
    .count {
      margin-top: 20px;
      font-size: 22px;
      text-align: center;
      .text {
        font-weight: 600;
        color: $theme-color;
      }
    }
    .img-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        display: block;
        width: 100px;
        height: 60px;
        margin-top: 30px;
        margin-bottom: 20px;
      }
      .bg {
        width: 100px;
        height: 60px;
        background: url('../../assets/images/8.jpg');
      }
    }
  }
</style>
